<!-- 公众号小程序授权页面 -->
<template>
  <div class="app-main-content-box">
    <div class="auth-container">
      <div class="title clearfix">
        <div class="fl">
          <strong>公众号授权</strong>
        </div>
        <div v-if="!$store.getters.banBtnList.includes('BTN_MP_AUTH')" class="fr">
          <el-button
            v-if="mpInfo.default.auth"
            type="primary"
            size="medium"
            round
            @click="getAuthUrl(1)"
          >重新授权</el-button>
          <el-button v-else type="success" size="medium" round @click="getAuthUrl(1)">申请授权</el-button>
        </div>
      </div>

      <div class="content">
        <div class="noAuth" v-if="!mpInfo.default.auth">暂未授权，你需要先进行公众号授权后才可以使用相关功能</div>
        <el-form v-else label-width="100px" size="small">
          <el-form-item label="公众号状态：">
            <el-tag v-if="mpInfo.default.auth.base.state === 1" type="success">已授权</el-tag>
            <el-tag v-if="mpInfo.default.auth.base.state === 0" type="danger">授权异常</el-tag>
            <div v-if="mpInfo.default.auth.base.state === 0">
              <el-alert
                style="width: 300px; margin-top: 10px; padding: 5px 5px"
                :closable="false"
                :title="mpInfo.default.auth.base.remark"
                type="error"
              ></el-alert>
            </div>
          </el-form-item>
          <el-form-item label="公众号名称：">
            <div>{{ mpInfo.default.auth.info.nickName }}</div>
          </el-form-item>

          <el-form-item label="appId：">
            <div>{{ mpInfo.default.auth.base.appId }}</div>
          </el-form-item>

          <el-form-item label="已授予权限：">
            <div>{{ mpInfo.default.auth.permsStr }}</div>
          </el-form-item>
          <el-form-item
            v-if="mpInfo.default.auth.missingPermsStr"
            style="color: crimson"
            label="缺少权限："
          >
            <div>{{ mpInfo.default.auth.missingPermsStr }}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- <div class="auth-container">
      <div class="title clearfix">
        <div class="fl">
          <strong>小程序授权</strong>
        </div>
        <div v-if="!$store.getters.banBtnList.includes('BTN_MA_AUTH')" class="fr">
          <el-button v-if="ma" @click="getAuthUrl(2)" size="medium" round type="primary">重新授权</el-button>
          <el-button v-else @click="getAuthUrl(2)" size="medium" round type="success">申请授权</el-button>
        </div>
      </div>

      <div class="content">
        <div class="noAuth" v-if="!ma">暂未授权，你 需要先进行小程序授权后才可以使用相关功能</div>
        <el-form v-else label-width="100px" size="small">
          <el-form-item label="小程序状态：">
            <el-tag v-if="ma.base.state === 1" type="success">已授权</el-tag>
            <el-tag v-if="ma.base.state === 0" type="danger">授权异常</el-tag>
            <div v-if="ma.base.state === 0">
              <el-alert
                style="width: 300px; margin-top: 10px; padding: 5px 5px"
                :closable="false"
                :title="ma.base.remark"
                type="error"
              ></el-alert>
            </div>
          </el-form-item>

          <el-form-item label="小程序名称：">
            <div>{{ ma.info.nickName }}</div>
          </el-form-item>
          <el-form-item label="appId：">
            <div>{{ ma.base.appId }}</div>
          </el-form-item>
          <el-form-item label="已授予权限：">
            <div>{{ ma.permsStr }}</div>
          </el-form-item>
          <el-form-item v-if="ma.missingPermsStr" style="color: crimson" label="缺少权限：">
            <div>{{ ma.missingPermsStr }}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>-->
  </div>
</template>

<script>
  import { mapGetters, mapActions } from "vuex";
  import { getWechatAuthUrl, checkAuth } from "@/api/wechat.js";

  export default {
    data() {
      return {};
    },

    computed: {
      ...mapGetters(["mpInfo"])
    },

    mounted() {
      // this.getAuthInfo();
      this.checkAuthResult();
    },

    methods: {
      /**
       *  获取数据
       */
      ...mapActions(["getAuthMp"]),
      // 检查结果
      checkAuthResult() {
        let preAuthCode = this.$route.query["preAuthCode"];
        if (!preAuthCode || localStorage.getItem(preAuthCode)) {
          this.getAuthInfo();
        } else {
          this.check(preAuthCode);
        }
      },

      // 获取授权数据
      getAuthInfo() {
        this.getAuthMp();
      },

      check(preAuthCode) {
        // 重新获取数据
        // TODO 根据预授权码查询授权状态, 可能要遍历查询, 后台有延迟
        checkAuth(preAuthCode).then(res => {
          this.getAuthInfo();
          if (res.data.state === 1) {
            // 授权成功
            localStorage.setItem(preAuthCode, "check");
            this.$notify({
              title: "成功",
              message: "授权成功",
              type: "success",
              duration: 2000,
              offset: 40
            });
          } else if (res.data.state === 0) {
            // 授权未完成
          } else if (res.data.state === 2) {
            // 授权失败
            const reason = res.data.reason;
            localStorage.setItem(preAuthCode, "check");
            this.$alert(reason, "授权异常", {
              confirmButtonText: "确定",
              type: "error",
              center: true,
              callback: action => {}
            });
          }
        });
      },

      /**
       *  按钮组
       */
      // 申请授权
      getAuthUrl(authType) {
        let cb = location.protocol + "//" + location.host + "/#/public/auth";
        // location.pathname +
        // location.hash;
        getWechatAuthUrl({ authType, cb }).then(res => {
          // 预授权码
          window.location.href = res.data.url;
        });
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .auth-container {
    margin-bottom: 20px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    .title {
      padding: 5px 10px;
      height: 40px;
      line-height: 40x;
      border-radius: 5px;
      background: #eceff1;
      .fl {
        line-height: 30px;
      }
      span {
        font-size: 20px;
      }
      .el-button {
        height: 30px;
        line-height: 0;
      }
    }
    .content {
      padding: 5px 10px;
      .noAuth {
        text-align: center;
        height: 100px;
        line-height: 100px;
      }
      .el-row {
        margin: 5px;
      }
    }
  }
</style>

